<script>
import { toRefs, reactive } from 'vue';
import { useRouter } from 'vue-router';
import { getCurrentUser, Logout } from '../api/index';
import { showSuccessToast } from 'vant';

export default {
    setup() {
        const state = reactive({
            user: {},
            show: false
        })
        const router = useRouter();

        const getUser = async () => {
            try {
                const response = await getCurrentUser();
                state.user = response.data;
                console.log(state.user);
            } catch (error) {
                console.error('获取商家列表数据时出错:', error);
            }
        };

        getUser();

        const logout = async () => {
            try {
                const response = await Logout();
                console.log(response);
                if (response.code === 2000) {
                    state.show = true;
                    setTimeout(() => {
                        state.show = false;
                        router.push('/login')
                        showSuccessToast('退出登录成功');
                    }, 1000);
                }

            } catch (error) {
                console.error('登出时出错:', error);
            }
        }

        return {
            ...toRefs(state),
            logout
        }
    }



};
</script>

<template>
    <div class="body">
        <van-overlay style="z-index: 1000 !important;" :show="show">
            <div class="wrapper" @click.stop>
                <van-loading style="margin-top: 300px;" type="spinner" size="40px" color="#0094ff"
                    vertical>正在退出登录...</van-loading>
            </div>
        </van-overlay>
        <div class="container">

            <div class="userinfo">
                <img :src="user.userAvatarUrl" alt="Avatar" class="avatar" />
                <div class="user-info-text">
                    <span>昵称: {{ user.userNickName }}</span>
                    <span> ID: {{ user.userId }}</span>
                </div>
            </div>

        </div>
        <div class="setinfo">

            <van-cell  icon="location-o" class="cell" title="地址编辑" is-link to="setaddress" />
            <van-cell  icon="setting-o" class="cell" title="修改密码" is-link to="editpassword" />
            <van-cell icon="wap-home-o" class="cell" title="退出登录" is-link @click="logout" />

            <van-tabbar route>
                <van-tabbar-item replace to="/" icon="home-o">首页</van-tabbar-item>
                <van-tabbar-item replace to="/order" icon="shopping-cart-o">订单</van-tabbar-item>
                <van-tabbar-item replace to="/user" icon="user-o">我的</van-tabbar-item>
            </van-tabbar>
        </div>

    </div>


</template>

<style lang="scss" scoped>
.container {
    display: flex;
    flex-direction: column;
    align-items: left;
    justify-content: left;


    padding-bottom: 50px;
    overflow-y: auto;
    // background-color: #f6f6f6;
    // background-image: linear-gradient(135deg,
    //         #1989fa 0%,
    //         #7db9f5 50%,
    //         #c1e3ff 100%);
    background-image: url('../assets/img/user-info.jpg');

}

.userinfo {
    display: flex;
    margin-left: 25px;
    margin-top: 50px;
    background-color: rgb(0, 0, 0, 0);
    // background-image: linear-gradient(45deg, #1989fa, #7db9f5, #c1e3ff);
}

.avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    margin-right: 10px;
}

.user-info-text {
    margin-top: 12px;
    margin-left: 10px;
    font-family: 'Arial', sans-serif;
    /* 使用 Arial 字体，如果没有则使用默认无衬线字体 */
    font-size: 18px;
    /* 设置字体大小 */
    line-height: 1.6;
    /* 设置行高，使得文本阅读更舒适 */
    font-weight: 600;
    /* 设置字体粗细为正常 */
    color: #333;
    /* 设置深灰色，比纯黑色柔和 */
    text-align: justify;
    letter-spacing: 0.5px;
    word-spacing: 1px;
}

.user-info-text span {

    display: block;

}

.label {
    margin-right: 10px;
}

.setinfo {
    // display: flex;
    // justify-content: space-between;
    // margin-top: 50px;
    font-size: 30px;
}

.cell {
    height: 60px;
    font-size: 18px;
    font-weight: 530;
}

.item {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: #000;
}

.item p {
    margin-left: 10px;
}
</style>
